<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<%@ page import="java.util.Date"%>

<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
</head>

<link type="text/css" href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="/hrs-intranet/js/cluetip/jquery.cluetip.js"></script>
<link type="text/css" href="/hrs-intranet/js/cluetip/jquery.cluetip.css" rel="stylesheet" />
	
<link rel="stylesheet" href="/hrs-intranet/styles/button.css" type="text/css" />
	

<script type="text/javascript">
	function clickOK() {
		document.getElementById('okbtn').click();
	}

	function Func1Delay()
	{
		setTimeout("clickOK()", 100);
	}

	function confirmRemove( url )
	{
		if ( confirm("You are about to remove a project. Are you sure you want to continue?") )
		{
			document.forms[0].action = url;
	  		document.forms[0].submit();
		}
	}
</script>

<script type="text/javascript">
	function setEdit(projectId, projectName, contractType, currency, clientList, clientListId, employeeEdit, employeeEditId, startDate, endDate, descriptionEdit){
		document.getElementById("selectedProjectForEdit").value = projectId;
		
		var projectAutoCompleter = dojo.widget.byId("project_name");
		projectAutoCompleter.setAllValues(projectName, projectId);
		
		var contractAutoCompleter = dojo.widget.byId("contract_type");
		contractAutoCompleter.setAllValues(contractType, contractType);
		
		var currencyAutoCompleter = dojo.widget.byId("currency_list");
		currencyAutoCompleter.setAllValues(currency, currency);
		
		var clientAutoCompleter = dojo.widget.byId("client_list");
		clientAutoCompleter.setAllValues(clientList, clientListId);
		
		var employeeAutoCompleter = dojo.widget.byId("employee_edit");
		employeeAutoCompleter.setAllValues(employeeEdit, employeeEditId);
		
		var startDatePicker= dojo.widget.byId("startDate_edit");
		startDatePicker.setValue(new Date(parseFloat(startDate)));

		var endDatePicker= dojo.widget.byId("endDate_edit");
		endDatePicker.setValue(new Date(parseFloat(endDate)));
		
		document.getElementById("description_edit").value = descriptionEdit;
		
		var cloneBody = document.getElementById("body_edit_"+projectId+"").cloneNode(true);
		var rows = cloneBody.rows;
		for (i=0; i<rows.length; i++){
			var row = rows.item(i);
			rows.item(i).className = "partnerRow_edit_clone";
			for (j=0; j<row.cells.length; j++){
				var id = row.cells.item(j).id;
				row.cells.item(j).id = id + "_clone";
			}
		}
		cloneBody.className = "body_edit_clone";
		$('#table_partner_edit').append(cloneBody);
		/* $('#table_partner_edit').append(document.getElementById("body_edit_"+projectId+"")); */
			
	}
	
</script>

<script type="text/javascript">
	function addPartner(){
	if( document.getElementById("partnerSelected").value !="" && document.getElementById("selectedPercentage").value != "" ){
		var i = document.getElementById("partnerSelected").selectedIndex;
		$('.partnersTable').append(
				'<tr class="partnerRow" id="t_'+document.getElementById("partnerSelected").value+'">'+
					'<td id="partner_'+document.getElementById("partnerSelected").value+'"><label title="'+document.getElementById("partnerSelected").value+'">'+ document.getElementById("partnerSelected").options[i].text +'</label></td>'+
					'<td><label>'+document.getElementById("selectedPercentage").value+'</label></td>'+
					'<td><input id="partner_checked_'+document.getElementById("partnerSelected").value+'" type="checkbox"></td>'+
					'<td align="center"><input type="button" value="--" class="buttonRemove" '+
					'onclick="javascript: removePartnerRow(t_'+document.getElementById("partnerSelected").value+');"</td>'+
				'</tr>');

		var selected = document.getElementById("selectedPartners").value;
		selected = selected+'p'+document.getElementById("partnerSelected").value+'p,a'+document.getElementById("selectedPercentage").value+'a,d'
					+document.getElementById("partner_checked_"+document.getElementById("partnerSelected").value).checked+'d;';
		
		document.getElementById("selectedPartners").value = selected;
		document.getElementById("selectedPercentage").value = "";
		document.getElementById("partnerSelected").value = "";
		}
	}
	
	function addPartnerEdit(id){
		if( document.getElementById("partnerSelected_edit").value !="" && document.getElementById("selectedPercentage_edit").value != "" ){
			var i = document.getElementById("partnerSelected_edit").selectedIndex;
			id = document.getElementById("selectedProjectForEdit").value;
			/* Nuevo */
			var table = $('#table_partner_edit');
			table.find('#body_edit_'+id+'').append(
					'<tr class="partnerRow_edit_clone" id="partner_edit_'+id+'">'+
					'<td id="row_'+id+document.getElementById("partnerSelected_edit").value+'" ><label id="partner_'+document.getElementById("partnerSelected_edit").value+'" title="'+document.getElementById("partnerSelected_edit").value+'">'+ document.getElementById("partnerSelected_edit").options[i].text +'</label></td>'+
					'<td><input id="partner_abj_'+document.getElementById("partnerSelected_edit").value+'" value="'+document.getElementById("selectedPercentage_edit").value+'"></td>'+
					'<td><input id="partner_checked_'+document.getElementById("partnerSelected_edit").value+'" type="checkbox" ></td>'+
					'<td align="center"><input type="button" value="--" class="buttonRemove" '+
					'onclick="javascript: removePartnerRowEdit(this.parentNode);"</td>'+
				'</tr>');
			//\'row_'+id+document.getElementById("partnerSelected_edit").value+'\'
			document.getElementById("selectedPercentage_edit").value = "";
			document.getElementById("partnerSelected_edit").value = "";
			}
		}
	
	function saveNewPartners(id){
		var selected = "";
		 $('.partnerRow', '.partnersTable').each(function() {
			var idPartner = this.cells[0].firstChild.title;
			var idAbj = this.cells[1].firstChild.textContent;
			var idCkd = this.cells[2].firstChild.checked; 
			
			selected = selected +'p'+ idPartner+ 'p,a'+ idAbj + 'a,d' + idCkd + 'd;';    
		 });
		document.getElementById("selectedPartners").value = selected;
		
		return true;
	}
	
	function savePartners(id){
		var selected = "";
		 $('.partnerRow_edit_clone', '.body_edit_clone').each(function() {
			var idPartner = this.cells[0].firstChild.title;
			var idAbj = this.cells[1].firstChild.value;
			var idCkd = this.cells[2].firstChild.checked; 
			
			selected = selected +'p'+ idPartner+ 'p,a'+ idAbj + 'a,d' + idCkd + 'd;';    
		 });
		document.getElementById("selectedPartners_edit").value = selected;
		
		return true;
	}
	
	function closeNewDialog(){
		$('.partnerRow').remove();
		document.getElementById("selectedPartners").value = "";
	}
	
	function closeEditDialog(){
		var toDelete = $('#table_partner_edit');
		toDelete.find('.body_edit_clone').remove();
		document.getElementById("selectedPartners").value = "";
	}
	
	function removePartnerRow(id){
		  var body = id.parentNode;
		  body.removeChild(id);
	}
	
	function removePartnerRowEdit(id){
		  var row = id.parentNode;
		  var body = row.parentNode;
		  body.removeChild(row);
	}
</script>

<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}
	
	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 500,
			closeText: 'hide',
			height : 'auto',
			zIndex:0,
			hide: { effect: 'drop', direction: "down" },
			show: { effect: 'drop', direction: "up" },
			open: function(event, ui) {
				$(".ui-dialog-titlebar").hide();
                $(".ui-dialog-titlebar-close").hide();
    			}
		});
		
		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();
		
	});
	

</script>

<s:form cssClass="formClass">

	<sx:autocompleter list="allProjectsList" listValue="name"
					searchType="startword" listKey="id" showDownArrow="false"
					keyName="selectedProjectId" name="selectedProjectName"
					label="Project Name" />
			<sx:autocompleter list="allClientList" listValue="name"
					searchType="startword" listKey="id" showDownArrow="false"
					keyName="selectedClientId" name="selectedClientName" label="Client" />
			<sx:autocompleter label="Contract Type"
					showDownArrow="false" searchType="startword"
					name="selectedContractType" forceValidOption="false"
					list="contractTypeList" listKey="string" listValue="string" />
			<sx:autocompleter label="Currency" showDownArrow="false"
					searchType="startword" name="selectedCurrencyType"
					forceValidOption="false" list="currencyList" listKey="string"
					listValue="string" />				
			<sx:autocompleter list="employeeList"
					listValue="person.name" searchType="startword" listKey="id"
					showDownArrow="false" keyName="selectedEmployeeId"
					name="selectedEmployeeName" label="Leader" />
	<table width="36%">
		<tr>
			<td width="50%" align="right"><table><s:reset type="reset" key="Reset" cssClass="btn" onclick="Func1Delay()" style="text-align: center" /></table></td>
			<td width="50%" align="left"><table><s:submit action="ProjectAction_filterProjects" key="Filter" cssClass="btn" id="okbtn" style="text-align: center"/></table></td>
		</tr>
	</table>

	<table width="90%">
		<tr>
			<td align="right"><s:a cssClass="Add" href="#" id="dialog_link"
					onclick="javascript: return showDialog('#dialogProj');">Add Project</s:a>
			</td>
		</tr>
		<tr>
			<td><display:table id="projectList" name="projectList"
					defaultsort="1" defaultorder="ascending"
					requestURI="ProjectAction_filterProjects" class="listable"
					cellpadding="0" cellspacing="0" pagesize="10">
					<display:column property="name" title="Project Name"
						sortable="true" />
					<display:column title="Contract Type" sortable="true"
						property="contractType.string" />
					<display:column property="client.name" title="Client"
						sortable="true" />
					<display:column property="employeeInCharge.person.name"
						title="Leader" sortable="true" />

					<s:url var="delete_action" action="ProjectAction_deleteProject"
						namespace="/hrs2" />
					<s:url var="view_action" action="ProjectAction_viewDetails"
						namespace="/hrs2" />
					<display:column title="Options">
						<s:if test="hasPermission(permissionNameConverter.getEditProjectPermission())">
							
							<s:a href="#" id="dialog_link" onclick="javascript: setEdit('%{#attr.projectList.id}','%{#attr.projectList.name}',
									'%{#attr.projectList.contractType}', '%{#attr.projectList.currency}','%{#attr.projectList.client.name}',
									'%{#attr.projectList.client.id}','%{#attr.projectList.employeeInCharge.person.name}','%{#attr.projectList.employeeInCharge.id}',
									'%{#attr.projectList.dateStart.timeInMillis}','%{#attr.projectList.dateEnd.timeInMillis}','%{#attr.projectList.description}'); return showDialog('#dialogEdit');">
									Edit </s:a>
									&nbsp;&nbsp;&nbsp;
						</s:if>
						<s:if
							test="hasPermission(permissionNameConverter.getRemoveProjectPermission())">
							<a
								href="javascript:confirmRemove('${delete_action}?selectedProjectForRemove=${projectList.id}')">Remove</a>
								&nbsp;&nbsp;&nbsp;
						</s:if>
						
						<div id="dialogPartners">
							<table class="listable" style="background: white;" >
								<tbody id="body_edit_${projectList.id}" class="bodyEdit">
									<%-- <s:if test="%{#attr.projectList.referrings} != null"> --%>
									<s:iterator value="%{#attr.projectList.referrings}">
										<tr class="partnerRow_edit" id="partner_edit_${id}">
											<td id="row_${projectList.id}_${partner.id}"><label id="partner_${id}" title="${partner.id}"><s:property
														value="partner.person.name" /> </label></td>
											<td align="right"><input id="partner_abj_${id}"
												value="${abjudication}"></td>
											<s:if test='%{defaultPartner}'> 
											<td><input id="partner_checked_${id}" type="checkbox"
												value="${defaultPartner}" checked="checked"></td>
											</s:if>
											<s:else>
												<td><input id="partner_checked_${id}" type="checkbox"
												value="${defaultPartner}" ></td>
											</s:else>
											<td align="center"><input type="button" value="--"
												class="buttonRemove"
												onclick="javascript: removePartnerRowEdit(row_${projectList.id}_${partner.id}_clone);">
											</td>
										</tr>
									</s:iterator>
									<%-- </s:if> --%>
								</tbody>
							</table>
						</div>
						
						<div id="dialogDetails${projectList.id}" title="Details">
							<h2>${projectList.name}</h2>

							<table class="listable" style="background: white;">
								<tr>
									<td colspan="2"><label><b>Client: </b>${projectList.client.name}</label></td>
								</tr>
								<tr>
									<td colspan="2"><label><b>Employee In Charge: </b>${projectList.employeeInCharge.person.name}</label></td>
								</tr>
								<tr>
									<td colspan="2"><label><b>Contract Type: </b>${projectList.contractType}</label></td>
								</tr>
								<tr>
									<td colspan="2"><label><b>Currency: </b>${projectList.currency}</label></td>
								</tr>
								<tr>
									<td colspan="2"><label><b>Description: </b>${projectList.description}</label></td>
								</tr>
								<tr>
								 	<td><label><b>Start Date: </b>${projectList.formatedStartDate}</label></td>
									<td><label><b>End Date: </b>${projectList.formatedEndDate}</label></td>
								</tr>
							</table>
							<table class="listable" style="background: white;">
								<thead>
									<tr>
										<th width="65%">Partner</th>
										<th width="25%">Abjudication (%)</th>
										<th width="10%">Default</th>
									</tr>
								</thead>
								<tbody>
								<s:iterator value="%{#attr.projectList.referrings}">
									<tr>
										<td><label><s:property value="partner.person.name"/></label></td>
										<td align="right"><label><s:property value="abjudication"/></label></td>
										<td><label><s:property value="formatedDefaultPartner"/></label></td>
									</tr>
								</s:iterator>
								</tbody>
							</table>
							<display:table id="currentAssigned" name="${projectList.currentlyAssigned}" class="listable" cellpadding="0" cellspacing="0">
								<display:caption media="html">
										<thead>
											<tr>
												<th colspan="5">Currently Assigned</th>
											</tr>
										</thead>
								</display:caption>
								<display:column property="employee.person.name" title="Employee" />
								<display:column property="assignedRole.description" title="Function"></display:column>
								<display:column property="assignmentType" title="Type"></display:column>
								<display:column property="assignmentPorcentage" title="%"></display:column>
								<display:column property="endDate.time" title="End Date" format="{0,date,dd/MM/yyyy}"></display:column>
							</display:table>
							
							<div align="right">
								<input type="button" value="Close" class="btn" style="text-align: center;"
									onclick="$('#dialogDetails${projectList.id}').dialog('close');" />	
							</div>
						</div>
						
													<a href="#" id="dialog_link" onclick="javascript: return showDialog('#dialogDetails${projectList.id}');"> Details</a>
					</display:column>
				</display:table></td>
		</tr>
	</table>

</s:form>

<div id="dialogProj">
	<h2>Create New Project</h2>
	<div>
		<s:form cssClass="formClass">
			<s:hidden id="selectedPartners" name="selectedPartners" />
			<table>
			<sx:autocompleter searchType="startword" showDownArrow="false"
				autoComplete="false" name="selectedProjectName" label="Project Name" />

			<sx:autocompleter label="Contract Type" showDownArrow="false"
				searchType="startword" name="selectedContractType"
				forceValidOption="false" list="contractTypeList" listKey="string"
				listValue="string" />
			
			<sx:autocompleter label="Currency" showDownArrow="false"
				searchType="startword" name="selectedCurrencyType"
				forceValidOption="false" list="currencyList" listKey="string"
				listValue="string" />
			
			<sx:autocompleter list="allClientList" listValue="name"
				searchType="startword" listKey="id" showDownArrow="false"
				keyName="selectedClientId" name="selectedClientName" label="Client" />

			<sx:autocompleter list="employeeList" listValue="person.name"
				searchType="startword" listKey="id" showDownArrow="false"
				keyName="selectedEmployeeId" name="selectedEmployeeName"
				label="Leader" />

			<sx:datetimepicker name="selectedStartDate" label="Start Date" displayFormat="dd/MM/yyyy" />

			<sx:datetimepicker name="selectedEndDate" label="End Date" displayFormat="dd/MM/yyyy" />
			
			<s:textarea name="description" label="Description" rows="4" cols="16"
				cssClass="formTextAreaClass" wrap="50" />
			
			</table>
			<table width="100%" style="border: 1px solid #DDDDDD;">
				<tr>
					<td width="80%">
					<table width="100%"><tr><td colspan="2"><s:select list="partnerList" listValue="person.name" 
								 listKey="id" key="selectedEmployeeName"  name="selectedEmployeeName" id="partnerSelected" 
								label="Referent Partners" cssStyle="width: 100%"/></td></tr></table>
					</td>
					<td>
						<label class="label">%</label><input type="text" maxlength="3" name="selectedPercentage" width="20%" id="selectedPercentage" style="width: 30%">
					</td>
					<td>
						<table><tr><td><input type="button" value="+" class="buttonAdd" style="text-align: center; font: bold; font-size: 15px" onclick="javascript: addPartner();" /></td></tr></table>
					</td>
				</tr>
				<tr>
					<td colspan="4">
						<table width="100%" class="listable" style="background-color: #EEEEEE" id="newProjectTable"> 
							<thead>
								<tr>
									<th width="70%" align="left" class="odd"><label style="text-align: left;"><b>Partner</b></label></th>
									<th width="10%" class="odd"><label><b>%</b></label></th>
									<th width="10%" class="odd"><label><b>Default</b></label></th>
									<th width="10%" class="odd"><label><b>Remove</b></label></th>
								</tr>
							</thead>
							<tbody class="partnersTable">
							</tbody>
						</table>
					</td>
				</tr>
				<tr>
					<td width="50%" align="right"><table><s:submit action="ProjectAction_saveProject" key="Ok" cssClass="btn" id="okbtn" style="text-align: center"
					onclick="javascript: return saveNewPartners('');"/></table></td>
					<td width="50%" align="left"><table><tr><td><input type="button" value="Cancel" class="btn" style="text-align: center"
						onclick="javascript: closeNewDialog(); $('#dialogProj').dialog('close');"/></td></tr></table></td>
				</tr>
			</table>
		</s:form>
	</div>
</div>

<div id="dialogEdit">
	<h2>Edit Project</h2>
	<s:form cssClass="formClass">
		<s:hidden id="selectedPartners_edit" name="selectedPartners" />
		<s:hidden id="selectedProjectForEdit"
			name="selectedProjectForEdit" />
		<sx:autocompleter id="project_name"
			searchType="startword" showDownArrow="false" autoComplete="false"
			name="selectedProjectName" label="Project Name" />

		<sx:autocompleter id="contract_type"
			label="Contract Type" showDownArrow="false" searchType="startword"
			name="selectedContractType" forceValidOption="false"
			list="contractTypeList" listKey="string" listValue="string" />
		
		<sx:autocompleter id="currency_list"
			label="Currency" showDownArrow="false" searchType="startword" name="selectedCurrencyType"
			forceValidOption="false" list="currencyList" listKey="string"
			listValue="string" />
		
		<sx:autocompleter id="client_list"
			list="allClientList" listValue="name" searchType="startword"
			listKey="id" showDownArrow="false" keyName="selectedClientId"
			name="selectedClientName" label="Client" />

		<sx:autocompleter id="employee_edit"
			list="employeeList" listValue="person.name" searchType="startword"
			listKey="id" showDownArrow="false" keyName="selectedEmployeeId"
			name="selectedEmployeeName" label="Leader" />

		<sx:datetimepicker id="startDate_edit"
			name="selectedStartDate" label="Start Date"
			displayFormat="dd/MM/yyyy" />

		<sx:datetimepicker id="endDate_edit"
			name="selectedEndDate" label="End Date" displayFormat="dd/MM/yyyy" />

		<s:textarea id="description_edit"
			name="description" label="Description" rows="4" cols="16"
			cssClass="formTextAreaClass" wrap="50" />

	<table width="100%" style="border: 1px solid #DDDDDD;">
		<tr>
			<td width="60%">
				<table width="100%">
					<tr>
						<td colspan=><s:select list="partnerList"
								listValue="person.name" listKey="id" key="selectedEmployeeName"
								name="selectedEmployeeName" id="partnerSelected_edit"
								label="Referent Partners" cssStyle="width: 100%" /></td>
					</tr>
				</table>
			</td>
			<td><label class="label">%</label><input type="text"
				maxlength="3" name="selectedPercentage" width="20%"
				id="selectedPercentage_edit" style="width: 30%">
			</td>
			<td>
				<table>
					<tr>
						<td><input type="button" value="+" class="buttonAdd"
							style="text-align: center; font: bold; font-size: 15px"
							onclick="javascript: addPartnerEdit(${projectList.id});" /></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

		<table class="listable" style="background: white;"
			id="table_partner_edit">
			<thead>
				<tr>
					<th width="65%">Partner</th>
					<th width="25%">Abjudication (%)</th>
					<th width="10%">Default</th>
					<th width="10%">Remove</th>
				</tr>
			</thead>
		</table>

		<table>
		<tr>
			<td width="50%" align="right"><table>
					<s:submit action="ProjectAction_saveProject" key="Ok"
						cssClass="btn" id="okbtn" style="text-align: center"
						onclick="javascript: return savePartners('');" />
				</table>
			</td>
			<td width="50%" align="left"><table>
					<tr>
						<td><input type="button" value="Cancel" class="btn"
							onclick="javascript: closeEditDialog(); $('#dialogEdit').dialog('close');"
							style="text-align: center;" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	</s:form>
</div>
